/*
 * Copyright (C) 2018 iWARES Solution Provider
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

/**
 * @file	staple.css
 * @author	Eric.Tsai
 *
 */

body, html {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.staple-indicator, .staple-interrupter, .staple-workspace, .staple-desktop, .staple-overlay, .staple-interaction {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.staple-indicator {
	-webkit-transition: z-index .6s cubic-bezier(.7,0,.3,1), opacity .6s cubic-bezier(.7,0,.3,1);
	transition: z-index .6s cubic-bezier(.7,0,.3,1), opacity .6s cubic-bezier(.7,0,.3,1);
	z-index: -2000000000;
	opacity: -1;
}

.staple-indicator.staple-active {
	z-index: 2000000000;
	opacity: 1;
}

.staple-desktop {
	z-index: 1000000000;
	background: white;
}

.staple-interaction {
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
	background-color: white;
	z-index: 1200000000;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.staple-interaction:first-child { z-index: 1100000000; }

.staple-overlay {
	-webkit-transition: background .2s cubic-bezier(.4,0,.6,0);
	transition: background .2s cubic-bezier(.4,0,.6,0);
	background: transparent;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
}

.staple-overlay.staple-active {
	z-index: 1800000000;
	opacity: 1;
}

.staple-overlay.staple-overlay-dim {
	-webkit-transition: background .2s cubic-bezier(.4,1,.6,1);
	transition: background .2s cubic-bezier(.4,1,.6,1);
	background: rgba(0,0,0,.12);
}

.staple-overlay-mask {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: transparent;
	pointer-events: auto;
}

.staple-dialog, .staple-popup, .staple-aside, .staple-toast {
	-webkit-transition: -webkit-transform .2s cubic-bezier(.4,0,.6,0), opacity .2s cubic-bezier(.4,0,.6,0);
	transition: transform .2s cubic-bezier(.4,0,.6,0), opacity .2s cubic-bezier(.4,0,.6,0);
	position: absolute;
	display: block;
	border: none;
	background-color: white;
	padding: 0;
	margin: 0;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.5);
	opacity: 0;
}

.staple-dialog.staple-active, .staple-popup.staple-active, .staple-aside.staple-active, .staple-toast.staple-active {
	-webkit-transition: -webkit-transform .2s cubic-bezier(.4,1,.6,1), opacity .2s cubic-bezier(.4,1,.6,1);
	transition: transform .2s cubic-bezier(.4,1,.6,1), opacity .2s cubic-bezier(.4,1,.6,1);
	opacity: 1;
}

.staple-dialog {
	left: 50%;
	top: 45%;
	-webkit-transform: translate(-50%, 16px) scale(.5);
	transform: translate(-50%, 16px) scale(.5);
}

.staple-dialog.staple-active {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.staple-popup {
	-webkit-transform: scale(.85);
	transform: scale(.85);
}

.staple-popup.staple-active {
	-webkit-transform: none;
	transform: none;
}

.staple-aside.staple-aside-left {
	left: 0px;
	top: 0px;
	bottom: 0px;
	-webkit-transform: translate(-100%,0);
	transform: translate(-100%,0);
}

.staple-aside.staple-aside-right {
	right: 0px;
	top: 0px;
	bottom: 0px;
	-webkit-transform: translate(100%,0);
	transform: translate(100%,0);
}

.staple-aside.staple-aside-top {
	right: 0px;
	left: 0px;
	top: 0px;
	-webkit-transform: translate(0,-100%);
	transform: translate(0,-100%);
}

.staple-aside.staple-aside-bottom {
	right: 0px;
	left: 0px;
	bottom: 0px;
	-webkit-transform: translate(0,100%);
	transform: translate(0,100%);
}

.staple-aside.staple-active {
	-webkit-transform: none;
	transform: none;
}

.staple-toast {
	pointer-events: auto;
	z-index: 1900000000;
}

@keyframes staple-it-default-enter {
	from { transform: translate(100%,0); opacity: .8; }
	to { transform: translate(0,0); opacity: 1; }
}
@-webkit-keyframes staple-it-default-enter {
	from { -webkit-transform: translate(100%,0); opacity: .8; }
	to { -webkit-transform: translate(0,0); opacity: 1; }
}

@keyframes staple-it-default-leave {
	from { transform: translate(0,0); opacity: 1; }
	to { transform: translate(100%,0); opacity: .8; }
}
@-webkit-keyframes staple-it-default-leave {
	from { -webkit-transform: translate(0,0); opacity: 1; }
	to { -webkit-transform: translate(100%,0); opacity: .8; }
}

@keyframes staple-it-default-pop {
	from { transform: translate(-50%,0); opacity: .8; }
	to { transform: translate(0,0); opacity: 1; }
}
@-webkit-keyframes staple-it-default-pop {
	from { -webkit-transform: translate(-50%,0); opacity: .8; }
	to { -webkit-transform: translate(0,0); opacity: 1; }
}

@keyframes staple-it-default-push {
	from { transform: translate(0,0); opacity: 1; }
	to { transform: translate(-50%,0); opacity: .8; }
}
@-webkit-keyframes staple-it-default-push {
	from { -webkit-transform: translate(0,0); opacity: 1; }
	to { -webkit-transform: translate(-50%,0); opacity: .8; }
}
